<div class="sw-product-detail-reviews">
    {% block sw_product_detail_reviews %}
    <div v-if="isLoading">
        <sw-skeleton />
        <sw-skeleton />
    </div>

    <mt-card
        v-if="!isLoading"
        class="sw-product-detail-reviews__list"
        position-identifier="sw-product-detail-reviews"
        :title="cardTitle"
    >
        {% block sw_product_detail_reviews_data %}
        <template
            v-if="total"
            #grid
        >
            <sw-data-grid
                ref="gridReview"
                :data-source="dataSource"
                :columns="reviewColumns"
                :is-loading="isLoading"
                :show-selection="false"
                :show-actions="true"
            >
                {% block sw_product_detail_reviews_data_stars %}
                <template #column-points="{ item }">
                    {% block sw_product_detail_reviews_data_stars_content %}

                    <sw-rating-stars :value="item.points" />

                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_product_detail_reviews_data_status %}
                <template #column-status="{ item }">
                    <sw-data-grid-column-boolean
                        v-model:value="item.status"
                        :is-inline-edit="false"
                    />
                </template>
                {% endblock %}

                {% block sw_product_detail_reviews_data_created_at %}
                <template #column-createdAt="{ item }">
                    {{ dateFilter(item.createdAt, { hour: '2-digit', minute: '2-digit', second: '2-digit' }) }}
                </template>
                {% endblock %}

                {% block sw_product_detail_reviews_data_action %}
                <template #actions="{ item }">
                    {% block sw_product_detail_reviews_data_action_edit %}
                    <sw-context-menu-item
                        class="sw-product-detail-reviews__action-edit"
                        :disabled="!acl.can('product.editor') || undefined"
                        :router-link="{ name: 'sw.review.detail', params: { id: item.id } }"
                    >
                        {{ $tc('sw-product.reviewForm.contextMenuEdit') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_product_detail_reviews_data_action_delete %}
                    <sw-context-menu-item
                        class="sw-product-detail-reviews__action-delete"
                        variant="danger"
                        :disabled="!acl.can('product.editor') || undefined"
                        @click="onStartReviewDelete(item)"
                    >
                        {{ $tc('sw-product.reviewForm.contextMenuDelete') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_product_detail_reviews_data_pagination %}
                <template #pagination>
                    <sw-pagination
                        :total="total"
                        :limit="limit"
                        :page="page"
                        :total-visible="7"
                        :steps="[10]"
                        @page-change="onChangePage"
                    />
                </template>
                {% endblock %}
            </sw-data-grid>
        </template>
        {% endblock %}

        {% block sw_product_detail_reviews_empty_state %}

        <sw-empty-state
            v-if="!total"
            :title="$tc('sw-product.reviewForm.messageEmptyTitle')"
            :subline="$tc('sw-product.reviewForm.messageEmptySubline')"
            :absolute="false"
            empty-module
        >
            <template #icon>
                <img
                    :src="assetFilter('/administration/administration/static/img/empty-states/products-empty-state.svg')"
                    :alt="$tc('sw-product.reviewForm.messageEmptyTitle')"
                >
            </template>

            <template #actions>
                {% block sw_product_detail_reviews_empty_state_button %}
                <mt-button
                    ghost
                    variant="secondary"
                    @click="$router.push({ name: 'sw.review.index' })"
                >
                    {{ $tc('sw-product.reviewForm.emptyStateButton') }}
                </mt-button>
                {% endblock %}
            </template>
        </sw-empty-state>
        {% endblock %}

        {% block sw_product_detail_reviews_modal_delete %}
        <sw-modal
            v-if="showReviewDeleteModal"
            variant="small"
            :title="$tc('sw-product.reviewForm.modal.confirmTitle')"
            @modal-close="onCancelReviewDelete"
        >
            {% block sw_product_detail_reviews_modal_delete_body %}
            <p>{{ $tc('sw-product.reviewForm.modal.confirmText') }}</p>
            {% endblock %}

            {% block sw_product_detail_reviews_modal_delete_footer %}
            <template #modal-footer>
                {% block sw_product_detail_reviews_modal_delete_button_cancel %}
                <mt-button
                    size="small"
                    variant="secondary"
                    @click="onCancelReviewDelete"
                >
                    {{ $tc('global.default.cancel') }}
                </mt-button>
                {% endblock %}

                {% block sw_product_detail_reviews_modal_delete_button_confirm %}
                <mt-button
                    size="small"
                    variant="critical"
                    @click="onConfirmReviewDelete"
                >
                    {{ $tc('sw-product.reviewForm.modal.buttonDelete') }}
                </mt-button>
                {% endblock %}
            </template>
            {% endblock %}
        </sw-modal>
        {% endblock %}
    </mt-card>
    {% endblock %}
</div>
